<template>
  <div class="min-h serveProject bg-wt">
    <!-- 展示搜索框页面 -->
    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch">
    </SearchForm>

    <DialogForm ref="formRef" :visible="visible" :title="title" :data="formBaseData" @handleClose="handleClose"
      @handle-add="handleAdd" @handleEdit="handleEditForm">
    </DialogForm>

    <!-- 展示列表页面 
    定义属性和方法
    -->
    <TableList :data="data" :total="total" :pagination="pagination" :dataLoading="dataLoading"
      @onPageChange="onPageChange" @handleBulid="handleBulid" @handleEdit="handleEdit" @handleDelete="handleDelete"
      @handleSubmit="handleSubmit">
    </TableList>
    <!-- 删除弹出框 -->
    <OperateDialog :visible="visibleDelete" :title="Deletetitle" :text="text" :deleteText="deleteText"
      @handleClose="handleDeleteClose" @handleDelete="confirmDelete"></OperateDialog>

    <!-- 禁用弹出框 -->
    <Forbidden :visible="visibleStatus" :text="textStatus" :header="header" @handleClose="handleStatusClose" 
      @handleSubmit="handleSetStatus"></Forbidden>

  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue';
import { getProjectList, projectAdd, getProjectDetails, projectUpdate, projectDelete, projectStatus } from '@/api/serve'
//引入列表页组件
import TableList from './components/TabeList.vue'
//引入搜索框组件
import SearchForm from './components/SearchForm.vue'
//引入弹窗组件
import DialogForm from './components/DialogForm.vue'
//引入删除提示组件
import OperateDialog from '@/components/OperateDialog/index.vue'
//引入修改状态组件
import Forbidden from '@/components/Forbidden/index.vue'
//引入提示插件
import { MessagePlugin } from 'tdesign-vue-next'

const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中

const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

// 调用接口以获取项目列表
const getList = async () => {
  // 使用getProjectList函数获取项目列表数据，传入分页参数pagination
  const res = await getProjectList(pagination.value)
  // 将获取到的项目数据赋值给data，以便在Vue组件中使用
  data.value = res.data.records
  // 更新总记录数，用于分页功能
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  // 更新分页配置的当前页码和每页显示数量
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  // 重新获取列表数据
  getList()
}

// 判断当前参数是否包含小数点
const isDecimals = (val) => {
  // 如果值转换为字符串后包含 '.'，则返回true
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  // 若未找到小数点，则返回false
  return false;
}

// 重置搜索框
const handleReset = () => {
  // 重置页码
  pagination.value = {
    pageSize: 10,
    pageNum: 1
  }
  // 重新查询列表
  getList();
}
// 搜索按钮点击时的处理函数
const handleSearch = () => {
  // 调用获取列表的方法，重新获取列表数据
  // 此处是为了在用户点击搜索按钮后，根据新的搜索条件获取和展示最新的数据列表
  getList();
}
// 定义清空按钮点击事件处理函数
const handleClear = (val) => {
  // 判断清空的类型，根据传入的参数val来决定删除pagination.value中的哪个属性
  if (val === 'name') {
    // 如果val等于'name'，则删除pagination.value对象中的name属性
    delete pagination.value.name
  } else {
    // 如果val不等于'name'，则默认删除pagination.value对象中的status属性
    delete pagination.value.status
  }
  // 调用getList函数，重新获取列表数据，以更新视图
  getList();
}
//是否显示弹窗
var visible = ref(false)
//定义子组件对象
const formRef = ref(null)
const title = ref('') // 弹窗标题
// 点击新增护理项目按钮时触发此函数
const handleBulid = () => {
  // 设置标题为"新增"，用于新增护理项目
  title.value = "新增"
  // 将弹出框的可见状态设置为true，显示弹出框
  visible.value = true;
}
// 点击弹窗中的关闭或取消按钮时触发此方法，用以关闭弹窗
const handleClose = () => {
  // 将visible变量设置为false，从而隐藏弹窗
  visible.value = false;
}

// 调用新增接口
const handleAdd = async (val) => {
  // 调用接口
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    // 查询列表
    getList()
    // 关闭弹窗
    handleClose()
    // 清理弹窗中的内容，方便下次使用
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

const formBaseData = ref({}) // 弹窗表单内容

//编辑
const handleEdit = (val) => {
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  // 显示弹窗
  visible.value = true
}

// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}
//修改数据

// 修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

// 删除
const visibleDelete = ref(false) // 是否显示删除提示框
const deleteText = ref('') // 删除提示信息
const itemToDelete = ref(null) // 存储要删除的项
const Deletetitle = ref('') // 弹窗标题

// 点击删除按钮时触发此方法，用以显示删除提示框
const handleDelete = (val) => {
  // 显示删除提示框
  visibleDelete.value = true
  // 设置弹窗标题
  Deletetitle.value = '删除警告'
  // 设置提示信息
  deleteText.value = ` {${val.name}} 护理项目！！！`
  // 存储要删除的项，用于删除接口调用
  itemToDelete.value = val
}

// 用户确认删除操作
const confirmDelete = () => {
  if (itemToDelete.value) {
    // 调用删除接口
    deleteItem(itemToDelete.value.id)
    // 清空要删除的项
    itemToDelete.value = null
  }
}
// 调用删除接口
const deleteItem = async (id) => {
  const res = await projectDelete(id)
  if (res.code === 200) {
    MessagePlugin.success('删除成功')
    // 重新获取列表数据
    getList()
    // 关闭删除提示框
    visibleDelete.value = false
    // 重置删除提示信息
    deleteText.value = ''
  } else {
    MessagePlugin.error(res.msg)
  }
}
const handleDeleteClose = () => {
  // 关闭删除提示框
  visibleDelete.value = false
}

// 禁用启用
// 修改状态
const visibleStatus = ref(false) // 是否显示禁用提示框
const textStatus = ref('') // 禁用提示信息
const itemToStatus = ref(null) // 存储要禁用或启用项
const header = ref('') // 弹窗标题

// 点击禁用或启用按钮时触发此方法，用以显示禁用提示框
const handleSubmit = (val) => {
  // 显示禁用提示框
  visibleStatus.value = true
  // 设置提示信息
  if (val.status === 1) {
    header.value = '启用警告'
    textStatus.value = `启用 {${val.name}} 护理项目？`
  } else {
    header.value = '禁用警告'
    textStatus.value = `禁用 {${val.name}} 护理项目？`
  }
  // 存储要禁用或启用项，用于禁用接口调用
  itemToStatus.value = val
}

// 用户确认禁用操作
const SetstatusItem = async (params) => {
  // 调用禁用接口
  const res = await projectStatus(params)
  if (res.code === 200) {
    MessagePlugin.success('操作成功')
    // 重新获取列表数据
    getList()
    // 关闭禁用提示框
    handleStatusClose()
    // 重置禁用提示信息
    textStatus.value = ''
  } else {
    MessagePlugin.error(res.msg)
  }
}
const handleSetStatus = () => {
  // 调用禁用接口
  const params = {
    id: itemToStatus.value.id,
    status: itemToStatus.value.status === 1 ? 0 : 1
  }
  SetstatusItem(params)
  //清空要禁用或启用项
  itemToStatus.value = null
}
const handleStatusClose = () => {
  // 关闭禁用提示框
  visibleStatus.value = false
}
</script>